<template>
	<view class="category-list-mode"  @touchmove.prevent>
		<view class="title">再来一单</view>
	     <checkbox-group name="" @change="changeValue">
	  	<view v-for="(product, index) in newOrder" :key="index" class="category-product-item">
			<!-- 商品信息 -->
			<view class="radio-box"><checkbox :value="index" checked="true" /><text></text></view>
			 
		
			<view class="product-card">
				<view class="img-box">
					<image :src="product.images[0].url" class="product-img" @click.stop="navigateToDetail(product)"></image>
				</view>
				<view class="product-detail">
					<view class="product-name">
						{{ product.productName }}
					</view>
					<view class="description">
						{{ product.description }}
					</view>
					<view class="price-addcar">
						<view class="price">¥{{ (product.price || 0).toFixed(2) }}</view>
					</view>
				</view>
	           
				<view class="quantity-container">
					<uni-number-box v-model="product.quantity" @change="(value)=>changQuantity(index,value)" />
					
			<!-- 		
					<view class="left-buttons">
						<button v-if="getQuantity(product._id) > 0" class="quantity-btn minus" @touchend.prevent="changeQuantity(product, -1)">-</button>
						<text v-if="getQuantity(product._id) > 0" class="quantity">
							{{ getQuantity(product._id) }}
						</text>
					</view>
					<button class="quantity-btn plus" @touchend.prevent="changeQuantity(product, 1)">+</button> -->
				</view>
				
			</view>
		
		</view>	
		<view class="cartBtn" @click="addcart">加入购物车 </view>
		  </checkbox-group>
	</view>
	
</template>

<script>
import { includes } from 'lodash-es'

	export default{
		name:"productList",
		props:{
			products:{
				type:Array,
				default:()=>[]
				
			}
		},
	  mounted() {
	  	this.products.forEach(item=>{
			this.quantityMap[item._id]=1
			this.newOrder.push({...item,quantity:1})
		})
	  },
		data(){
			return{
			quantityMap:{}	,
			newOrder:[]
			}
		},
		methods:{
			changeValue(e) {
			  // 获取选中的索引值数组（checkbox-group中通过e.detail.value获取）
			  const checkedIndices = e.detail.value;
			  
			  // 遍历数组，更新未选中项的quantity为0
			  this.newOrder = this.newOrder.map((item, index) => {
			    // 判断当前索引是否被选中
			    const isChecked = checkedIndices.includes(index);
			    // 未选中则设置quantity为0，选中则保留原数量（或按需处理）
			    return isChecked ? item : { ...item, quantity: 0 };
			  });
			},
			navigateToDetail(product){
				
			},
			changQuantity(index,value){
			    this.newOrder[index].quantity=value
		
			},
			addcart(){
				    for(const item of this.newOrder){
						if(item.quantity!==0){
							this.$store.commit('cart/addItem', item);
						}
						
					}
					uni.navigateTo({
						url:'/pages/shopcart/shopcart'
					})
					
			}
			
			
			
			
		}
		
	}
	
	
	
</script>

<style lang="scss" scoped>
	.category-list-mode{
      padding: 20rpx 30rpx;
	  border-top-right-radius: 30rpx;
	  border-top-left-radius:30rpx ;
	  background-color: #f5f5f5;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	.title{
		font-size: 28rpx;
		font-weight: 600rpx;
		padding: 20rpx 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	
	}
	.radio-box{


        margin-top: auto;
				margin-bottom: auto;

	}
	.cartBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		background-color: #55aaff;
		color: #fff;
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
	}
	.category-product-item {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.img-box {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box; /* 关键：让宽高包含内边距，确保容器总尺寸为200rpx */
	}
	.product-card {
		background: #fff;
		display: flex;
		flex: 1;
		gap: 20rpx;
		padding: 10rpx 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease;
	
		&:active {
			transform: scale(0.98); /* 点击反馈 */
		}
	}
	
	.product-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		object-fit: cover; /* 新增：保持图片比例，裁剪多余部分（避免拉伸） */
		display: block; /* 消除图片底部可能出现的空白间隙 */
	}
	
	.product-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 8rpx;
	}
	.price-addcar {
		display: flex;
		align-items: center;
		margin-top: auto; /* 推到底部 */
		justify-content: space-between;
	}
	
	.price {
		font-size: 30rpx;
		font-weight: 500;
		color: #e64340;
	}
	.description {
		font-size: 24rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; /* 描述只显示1行 */
		overflow: hidden;
		margin-bottom: 12rpx;
	}
	
	.price-section {
		margin-bottom: 12rpx;
		display: flex;
		align-items: baseline;
	}
	
	.current-price {
		color: #e64340;
		font-size: 30rpx;
		font-weight: 500;
	}
	.original-price {
		color: #999;
		font-size: 22rpx;
		text-decoration: line-through;
		margin-left: 12rpx;
	}
	
	.sales-tag {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #999;
	}
	.quantity-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 999;
		.left-buttons {
			display: flex;
			align-items: center;
			gap: 8rpx; /* 减号和数量文本的间距 */
		}
	}
	
	/* 促销标签 */
	.product-tag {
		position: absolute;
		top: 10rpx;
		left: 0;
		padding: 6rpx 20rpx;
		color: #fff;
		font-size: 22rpx;
		border-radius: 0 20rpx 20rpx 0;
		z-index: 1;
	}
	 
</style>